// src/pages/EditorPage.js
import React, { useState } from 'react';
import RichTextEditor from '../components/RichTextEditor';
import './EditorPage.css';

function EditorPage() {
  const [savedContent, setSavedContent] = useState('');
  const [scriptInfo, setScriptInfo] = useState({
    title: '未命名剧本',
    author: '匿名',
    version: '1.0',
    lastModified: new Date().toLocaleDateString()
  });

  const handleSave = (content) => {
    console.log('保存的内容:', content);
    setSavedContent(content);

    fetch('/api/save-content', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ content }),
    })
      .then((response) => response.json())
      .then((data) => {
        alert('保存成功！');
      })
      .catch((error) => {
        console.error('保存失败:', error);
        alert('保存失败，请重试。');
      });
  };

  return (
    <div className="editor-page">
      <div className="editor-header">
        <h1>剧本编辑器</h1>
      </div>
      
      <div className="editor-container">
        {/* 左侧剧本信息 */}
        <div className="script-info">
          <h2>剧本信息</h2>
          <div className="info-item">
            <label>标题:</label>
            <input 
              type="text" 
              value={scriptInfo.title}
              onChange={(e) => setScriptInfo({...scriptInfo, title: e.target.value})}
            />
          </div>
          <div className="info-item">
            <label>作者:</label>
            <input 
              type="text" 
              value={scriptInfo.author}
              onChange={(e) => setScriptInfo({...scriptInfo, author: e.target.value})}
            />
          </div>
          <div className="info-item">
            <label>版本:</label>
            <input 
              type="text" 
              value={scriptInfo.version}
              onChange={(e) => setScriptInfo({...scriptInfo, version: e.target.value})}
            />
          </div>
          <div className="info-item">
            <label>最后修改:</label>
            <span>{scriptInfo.lastModified}</span>
          </div>
        </div>

        {/* 右侧编辑器 */}
        <div className="editor-content">
          <RichTextEditor onSave={handleSave} />
        </div>
      </div>

      {savedContent && (
        <div className="saved-content">
          <h2>已保存的内容：</h2>
          <pre>{savedContent}</pre>
        </div>
      )}
    </div>
  );
}

export default EditorPage;